<template>
  <div class="iframe-box" id="iframe-box" style="position: relative;background: #fff">
    <iframe :src="iframeSrc" class="iframe" ref="iframe"></iframe>
  </div>
</template>
<script>
export default {
  data() {
    return {
      iframeSrc: null,
      initX: null,
      initY: null,
      isFull: false
    };
  },
  mounted() {
    this.getIframeSrc();
    window.tt = this;
  },
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  methods: {
    getIframeSrc(route = this.$route) {
      let url = this.src || this.routerPath;
      let needToken;
      if (!url && route) {
        url = route.params.src || route.query.src || null;
        needToken = route.params.needToken || route.query.needToken || undefined;
      }
      if (needToken) {
        $http.get(decodeURIComponent(needToken)).then(() => {
          this.iframeSrc = decodeURIComponent(url);
          this.updated()
        });
      } else {
        this.iframeSrc = decodeURIComponent(url);
        this.updated()
      }
    },
    updated() {
        if (this.$refs.iframe) {
            // IE
            if (this.$refs.iframe.attachEvent) {
                this.$refs.iframe.attachEvent('onload', () => {
                    this.iLoading = false;
                    this.$emit('iframeOnload')
                });
            } else {
                this.$refs.iframe.onload = () => {
                    this.iLoading = false;
                    this.$emit('iframeOnload')
                };
            }
        }
    }
  },
  watch: {
    $route(val) {
      this.getIframeSrc(val);
    }
  }
};
</script>
<style lang="less">
.iframe-box {
  height: 99%;
  overflow: hidden;
  .iframe {
    width: 100%;
    height: 100%;
    border: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
}
</style>

